<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="/media/js/jquery-1.10.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <style type="text/css">
        html, body, #main { height: 702px; width: 1200px; margin: 0; padding: 0 }
    </style>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">

    // var winWidth = 0;
    // var winHeight = 0;
    //
    // if (window.innerWidth){
    //     winWidth = window.innerWidth;
    // }else if ((document.body) && (document.body.clientWidth)){
    //     winWidth = document.body.clientWidth;
    // }
    // if (window.innerHeight){
    //     winHeight = window.innerHeight;
    // } else if ((document.body) && (document.body.clientHeight)){
    //     winHeight = document.body.clientHeight;
    // }
    // $('#main').attr("width",winWidth);
    // $('#main').attr("height",winHeight);
    var myChart = echarts.init(document.getElementById('main'));
    option = {
        title: { text: '研究二室人员关系图' },
        tooltip: {
            formatter: function (x) {
                return x.data.des;
            }
        },
        series: [
            {
                type: 'graph',
                layout: 'force',
                symbolSize: 80,
                roam: true,
                edgeSymbol: ['circle', 'arrow'],
                edgeSymbolSize: [4, 10],
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                force: {
                    repulsion: 2500,
                    edgeLength: [10, 50]
                },
                draggable: true,
                itemStyle: {
                    normal: {
                        color: '#4b565b'
                    }
                },
                lineStyle: {
                    normal: {
                        width: 2,
                        color: '#4b565b'

                    }
                },
                edgeLabel: {
                    normal: {
                        show: true,
                        formatter: function (x) {
                            return x.data.name;
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                        }
                    }
                },
                data: [
                    {
                        name: '室主任',
                        des: '室主任',
                        itemStyle: {
                            normal: {
                                color: 'red'
                            }
                        }
                    },{
                        name: '研究一组组长',
                        des: '研究一组组长',
                        symbolSize: 100
                    },{
                        name: '一组_张三',
                        des: '一组-张三',
                        symbolSize: 100
                    },{
                        name: '一组_李四',
                        des: '一组-李四',
                        symbolSize: 100
                    },  {
                        name: '研究二组组长',
                        des: '研究二组组长',
                        symbolSize: 100
                    },{
                        name: '二组_王五',
                        des: '二组_王五',
                        symbolSize: 100
                    },{
                        name: '二组_赵六',
                        des: '二组_赵六',
                        symbolSize: 100
                    },  {
                        name: '研究三组组长',
                        des: '研究三组组长',
                        symbolSize: 100
                    },{
                        name: '三组_李大',
                        des: '三组_李大',
                        symbolSize: 100
                    },{
                        name: '三组_赵六',
                        des: '三组_赵六',
                        symbolSize: 100
                    }
                ],
                links: [
                    {
                        source: '室主任',
                        target: '研究一组组长',
                        name: ""
                    },{
                        source: '研究一组组长',
                        target: '一组_张三',
                        name: ""
                    },{
                        source: '研究一组组长',
                        target: '一组_李四',
                        name: ""
                    },{
                        source: '室主任',
                        target: '研究二组组长',
                        name: ""
                    },{
                        source: '研究二组组长',
                        target: '二组_王五',
                        name: ""
                    },{
                        source: '研究二组组长',
                        target: '二组_赵六',
                        name: ""
                    },{
                        source: '室主任',
                        target: '研究三组组长',
                        name: ""
                    },{
                        source: '研究三组组长',
                        target: '三组_李大',
                        name: ""
                    },{
                        source: '研究三组组长',
                        target: '三组_赵六',
                        name: ""
                    } ]
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>